<template>
  <div class="Home">
    <el-container>
      <el-header>
        <h2
          style="
            color: rgb(20, 202, 20);
            float: left;
            margin-left: 20px;
            margin-top: 10px;
          "
        >
          茶叶商城平台
        </h2>

        <div class="userRight">
          <span v-show="isLogin">欢迎客户{{ username }} </span>
          <img
            :src="require('/src/assets/img/' + userImgPath)"
            one
            v-show="isLogin"
            alt=""
            class="headPortrait"
          />

          <a href="javascript:;"
            ><span v-show="isLogin" @click="outLogin">注销</span></a
          >
          <a href="javascript:;" v-show="!isLogin"
            ><span @click="gotoLogin">登录</span></a
          >
          <a href="javascript:;" v-show="!isLogin"
            ><span @click="gotoRegister">注册</span></a
          >
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            :unique-opened="true"
          >
            <router-link :to="{ name: 'homePage' }">
              <el-menu-item index="1" @click="changeFalse">
                <img
                  src="../assets/img/home.png"
                  alt=""
                  style="width: 20px; height: 20px; margin-right: 5px"
                />

                <span slot="title">商城首页</span>
              </el-menu-item>
            </router-link>
            <el-submenu index="2">
              <template slot="title">
                <img
                  src="../assets/img/product.png"
                  alt=""
                  style="width: 20px; height: 20px; margin-right: 5px"
                />
                <span>茶叶商品</span>
              </template>
              <el-menu-item-group>
                <router-link :to="{ name: 'blackTea' }"
                  ><el-menu-item @click="changeTrue" index="1-1"
                    >红茶</el-menu-item
                  ></router-link
                >
                <router-link :to="{ name: 'greenTea' }"
                  ><el-menu-item @click="changeTrue" index="1-2"
                    >绿茶</el-menu-item
                  ></router-link
                >
                <router-link :to="{ name: 'whiteTea' }"
                  ><el-menu-item @click="changeTrue" index="1-3"
                    >白茶</el-menu-item
                  ></router-link
                >
                <router-link :to="{ name: 'oolongTea' }"
                  ><el-menu-item @click="changeTrue" index="1-4"
                    >乌龙茶</el-menu-item
                  ></router-link
                >
                <router-link :to="{ name: 'darkTea' }"
                  ><el-menu-item @click="changeTrue" index="1-5"
                    >黑茶</el-menu-item
                  ></router-link
                >
                <router-link :to="{ name: 'yellowTea' }"
                  ><el-menu-item @click="changeTrue" index="1-6"
                    >黄茶</el-menu-item
                  ></router-link
                >
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-notebook-1"></i>
                <span>了解茶叶</span>
              </template>
              <el-menu-item-group>
                <router-link :to="{ name: 'teaMaking' }"
                  ><el-menu-item @click="changeFalse" index="1-1"
                    >茶叶的制作</el-menu-item
                  ></router-link
                >
                <router-link :to="{ name: 'teaOrigin' }"
                  ><el-menu-item @click="changeFalse" index="1-2"
                    >茶叶的起源</el-menu-item
                  ></router-link
                >
                <router-link :to="{ name: 'teaFunction' }"
                  ><el-menu-item @click="changeFalse" index="1-3"
                    >茶叶的功能</el-menu-item
                  ></router-link
                >
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span>个人中心</span>
              </template>
              <el-menu-item-group>
                <router-link :to="{ name: 'myOrder' }"
                  ><el-menu-item index="1-1" @click="changeFalse"
                    >我的订单</el-menu-item
                  ></router-link
                >
                <router-link :to="{ name: 'myInfo' }"
                  ><el-menu-item index="1-2" @click="changeFalse"
                    >我的信息</el-menu-item
                  ></router-link
                >
                <router-link :to="{ name: 'myCar' }"
                  ><el-menu-item index="1-3" @click="changeFalse"
                    >我的购物车</el-menu-item
                  ></router-link
                >
                <router-link :to="{ name: 'myProduct' }"
                  ><el-menu-item
                    index="1-4"
                    @click="changeFalse"
                    v-show="type === 0"
                    >我的商品</el-menu-item
                  ></router-link
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <keep-alive
            ><router-view v-if="$route.meta.keepAlive"></router-view
          ></keep-alive>

          <router-view v-if="!$route.meta.keepAlive"></router-view>
          <div class="PayMoney" v-show="carIsShow === true">
            <div class="PayBtn">
              <el-button type="success" @click="togoMyCar">去结算</el-button>
            </div>
            <!-- <i style="width:50px;height:50px" class="el-icon-shopping-cart-2"></i> -->
            <div class="carDiv">
              <img src="../assets/img/shoppingCat.png" alt="" /><span>{{
                productsNumber
              }}</span>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getRequest } from "../util/request";
export default {
  name: "Home",
  data() {
    return {
      isLogin: false,
      token: "",
      username: "",
      type: 1,
      userId: "",
      carIsShow: false,
      products: [],
      productsNumber: 0,
      userImgPath: "headPortrait.jpg",
    };
  },
  methods: {
    changeTrue() {
      this.carIsShow = true;
    },
    changeFalse() {
      this.carIsShow = false;
    },
    // 获取新添加商品信息，并加入到products数组中
    getData(value) {
      // console.log('this.products前',this.products)
      var teaLength =
        this.$storage.get(this.$cookie.get("userId")) === null
          ? 0
          : this.$storage.get(this.$cookie.get("userId")).length;
      if (teaLength > this.productsNumber) {
        setTimeout(() => {
          this.products = [value, ...this.products];
          this.productsNumber = this.products.length;
        }, 50);
      }
      // console.log('this.products',this.products)
    },
    // 去购物车界面
    togoMyCar() {
      // console.log(this.$route)
      if (this.$route.path === "/myCar") {
        return;
      }
      this.$router.push({
        name: "myCar",
      });
      this.carIsShow = false;
    },

    //注销按钮
    outLogin() {
      this.$router.replace({
        name: "login",
      });
    },
    //登录按钮
    gotoLogin() {
      this.$router.replace({
        name: "login",
      });
    },
    //注册按钮
    gotoRegister() {
      this.$router.replace({
        name: "register",
      });
    },

    //获取用户头像请求
    getUserPortrait() {
      let reqResult = getRequest(
        "user/getUserPortrait",
        `?userId=${this.userId}`
      );
      reqResult.then(
        (response) => {
          // console.log(response.data);
          this.userImgPath = response.data[0].imgPath;
        },
        (error) => {
          throw error;
        }
      );
    },
  },
  mounted() {
    this.type = parseInt(this.$cookie.get("type"));
    //获取token值，判断是否登录
    this.token = this.$cookie.get("token");
    this.isLogin = this.token === null ? false : true;
    //获取用户id
    this.userId = this.$cookie.get("userId");

    //获取用户头像
    if (this.isLogin) {
      this.getUserPortrait();
    } else {
      this.userImgPath = "headPortrait.jpg";
    }

    //获取登录用户名
    this.username = this.$cookie.get("username");

    //  拿到添加商品的数量
    this.$bus.$on("teaData", this.getData);
    // console.log("route:",this.$route)

    //获取localStorage中的商品信息的值
    this.products = this.$storage.get(this.userId);
    this.productsNumber = this.products === null ? 0 : this.products.length;
    // console.log("userId:",this.userId)
    //把products中的数据送到购物车界面

    // this.$bus.$emit('products',this.products)
  },
};
</script>

<style scoped lang='less'>
.color {
  color: rgb(16, 233, 45);
}
a {
  text-decoration: none;
  color: gray;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  /* line-height: 60px; */
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  /* line-height: 700px; */
  min-height: 600px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  /* line-height: 160px;
     */
  min-height: 600px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.userRight {
  float: right;
  width: 250px;
  height: 60px;
  background-color: antiquewhite;
  position: relative;
  line-height: 60px;
  span {
    margin-right: 10px;
    font-size: 12px;
  }
  a {
    margin-right: 20px;
    font-size: 12px;
    float: right;
  }
  .headPortrait {
    position: absolute;
    width: 30px;
    height: 30px;
    margin: auto 5px;
    border-radius: 50%;
    top: 10px;
    margin-top: 10px;
    box-shadow: 0 0 0 0.3;
  }
}
.PayMoney {
  width: 82%;

  height: 80px;
  background-color: turquoise;
  line-height: 80px;
  position: fixed;
  bottom: 0;
  .PayBtn {
    float: right;
    margin-right: 50px;
  }
  .carDiv {
    position: relative;
    width: 60px;
    height: 60px;
    margin-top: 13px;
    margin-right: 20px;
    float: right;
    img {
      position: absolute;
      // float: right;
      width: 40px;
      height: 40px;
      top: 10px;
      left: 0;
    }
    span {
      position: absolute;
      right: 0;
      top: 0;
      width: 20px;
      height: 20px;
      border-radius: 50% 50%;
      background-color: tomato;
      font-size: 12px;
      text-align: center;
      line-height: 20px;
    }
  }
}
</style>